<template>
  <Content title="设备详情">
    <view class="device-details">
      <view class="content">
        <view class="content-top">
          <view class="title">{{ model.deviceNo }}</view>
          <view class="state">{{ model.state }}</view>

          <view class="text-box">
            <text class="label">设备型号：</text>
            <text class="value">{{ model.deviceSpec }}</text>
          </view>
          <view class="text-box">
            <text class="label">设备品牌：</text>
            <text class="value">{{ model.brand }}</text>
          </view>
        </view>

        <view class="main-box">
          <view class="nav-list-box">
            <MyNavList :data="navData" v-model="navIndex"></MyNavList>
          </view>
          <view v-show="navIndex == 0">
            <view class="running-state">
              <view class="title-1">今日运行状态</view>
              <view class="time-box" v-if="newTimeList[0]">
                <view
                  class="time-box-item"
                  v-for="item in newTimeList[0].stateDiagramList"
                  :key="item.startDateTime"
                >
                  <view class="lien"></view>
                  <view class="txt">{{
                    item.startDateTime.slice(11, 16)
                  }}</view>
                  <view
                    class="lien-state"
                    v-if="item.stateName === '停机'"
                  ></view>
                  <view
                    class="lien-state lien-state-1"
                    v-if="item.stateName === '待机'"
                  ></view>
                </view>
              </view>
            </view>

            <view class="production-schedule">
              <view class="production-schedule-box">
                <view class="box-l">
                  <view class="title-1">生产进度</view>
                  <view class="text-box">
                    <text class="label">设备型号：</text>
                    <text class="value">{{ newData.deviceSpec }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">设备品牌：</text>
                    <text class="value">{{ newData.brand }}</text>
                  </view>
                </view>
                <view class="box-r">
                  <EchartsArcbar ref="echartsArcbar"></EchartsArcbar>
                </view>
              </view>
            </view>

            <view class="info-box">
              <view class="text-box">
                <text class="label">生产工单:</text>
                <text class="value">{{ newData.workCode }}</text>
              </view>
              <view class="text-box">
                <text class="label">计划/合格:</text>
                <text class="value"
                  >{{ newData.planProduceQuantity || "--" }}/{{
                    newData.qualifiedQuantity || "--"
                  }}</text
                >
              </view>
              <view class="text-box">
                <text class="label">产品名称:</text>
                <text class="value">{{ newData.materialName }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品型号:</text>
                <text class="value">{{ data.materialModel }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品编号:</text>
                <text class="value">{{ newData.materialCode }}</text>
              </view>
              <view class="text-box">
                <text class="label">报废数量:</text>
                <text class="value">{{ newData.scrapQuantity }}</text>
              </view>
              <view class="text-box">
                <text class="label">合格数量:</text>
                <text class="value">{{ newData.qualifiedQuantity }}</text>
              </view>
            </view>
          </view>

          <view v-show="navIndex == 1">
            <view class="search-box">
              <MyDate v-model="search.startDate"></MyDate>
              <text class="label">至</text>
              <MyDate v-model="search.endDate"></MyDate>
            </view>
            <view class="running-state-box">
              <view class="running-state" v-for="obj in timeList" :key="obj.id">
                <view class="title-1">{{ obj.date }}</view>
                <view class="time-box">
                  <view
                    class="time-box-item"
                    v-for="item in obj.stateDiagramList"
                    :key="item.startDateTime"
                  >
                    <view class="lien"></view>
                    <view class="txt">{{
                      item.startDateTime.slice(11, 16)
                    }}</view>
                    <view
                      class="lien-state"
                      v-if="item.stateName === '停机'"
                    ></view>
                    <view
                      class="lien-state lien-state-1"
                      v-if="item.stateName === '待机'"
                    ></view>
                  </view>
                </view>

                <view class="running-state-info">
                  <view class="state-info-a">
                    <p>{{ obj.deviceUseRatio }}</p>
                    <p>利用率</p>
                  </view>
                  <view class="state-info-a">
                    <p>{{ obj.bootTime }}</p>
                    <p>开机时间</p>
                  </view>
                  <view class="state-info-a">
                    <p>{{ obj.runTime }}</p>
                    <p>生产时间</p>
                  </view>
                  <view class="state-info-a">
                    <p>{{ obj.offTime }}</p>
                    <p>离线时间</p>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="info-box info-box-bottom" v-show="navIndex == 0">
          <view class="title-1">模具信息</view>
          <view class="text-box">
            <text class="label">模具名称:</text>
            <text class="value">{{ newData.moldName }}</text>
          </view>
          <view class="text-box">
            <text class="label">模具编号:</text>
            <text class="value">{{ newData.moldCode }}</text>
          </view>
          <view class="text-box">
            <text class="label">型腔数/实际型腔数:</text>
            <text class="value"
              >{{ newData.cavityNum || "--" }}/{{
                newData.realityCavityNum || "--"
              }}</text
            >
          </view>
          <view class="text-box">
            <text class="label">使用状态:</text>
            <text class="value">{{ newData.moldState }}</text>
          </view>
          <view class="text-box">
            <text class="label">模具寿命:</text>
            <text class="value"></text>
          </view>
          <view class="text-box">
            <text class="label">模具剩余寿命:</text>
            <text class="value"></text>
          </view>
          <view class="text-box">
            <text class="label">合格数量:</text>
            <text class="value">{{ newData.qualifiedQuantity }}</text>
          </view>
        </view>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import MyDate from "@/components/myDate";
import MyNavList from "@/components/myNavList";
import EchartsArcbar from "./components/echartsArcbar";
import { getPageData } from "@/store/user";
import fetch from "@/utils/fetch";
import { getNotice, setNotice } from "@/store/user.js";
export default {
  components: {
    Content,
    MyNavList,
    EchartsArcbar,
    MyDate,
  },
  data() {
    return {
      data: [],
      navIndex: 0,
      search: {
        startDate: this.$dayjs(new Date()).format("YYYY-MM-DD"),
        endDate: this.$dayjs(new Date()).format("YYYY-MM-DD"),
        deviceId: "",
      },
      model: {},
      timeList: [],
      newTimeList: [],
      navData: [
        {
          label: "设备运行状态",
        },
        {
          label: "运行状态",
        },
      ],
      timeData: [
        {
          time: "08:00",
          open: true,
        },
        {
          time: "02:00",
          open: true,
        },
        {
          time: "16:00",
          offline: true,
        },
        {
          time: "20:00",
        },
        {
          time: "00:00",
        },
      ],
      newData: {},
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.model = getPageData();
    this.search.deviceId = option.deviceId;
    this.getNewList();
    this.getDevicePage();
  },
  onShow: function () {},
  computed: {
    // timeList() {
    //   const search = this.search;
    //   const i =
    //     search.a && search.b
    //       ? Math.abs(this.$dayjs(search.b).diff(search.a, "day"))
    //       : 1;
    //   const arr = new Array(i).fill({}).map((item, index) => {
    //     const date =
    //       index == 0
    //         ? this.$dayjs(search.a || new Date()).format("YYYY-MM-DD")
    //         : this.$dayjs(search.a || new Date())
    //             .add(1, "day")
    //             .format("YYYY-MM-DD");
    //     return {
    //       date,
    //       index,
    //     };
    //   });
    //   return arr;
    // },
  },
  watch: {
    search: {
      handler: function (val, oldVal) {
        this.getList(true);
      },
      deep: true,
    },
  },
  methods: {
    setEchart(refName, name, data) {
      const obj = {
        title: {
          name: data * 100 + "%",
          fontSize: 16,
          color: "#5889f1",
        },
      };
      let res = {
        series: [
          {
            name: "本月",
            color: "#5889f1",
            data: data,
          },
        ],
      };
      this.$nextTick(() => {
        if (this.$refs[refName]) {
          this.$refs[refName].init(obj);
          this.$refs[refName].setData(res);
        }
      });
    },
    getNewList() {
      fetch("get", "/dms/mobile/device/history/state", {
        startDate: this.$dayjs(new Date()).format("YYYY-MM-DD"),
        endDate: this.$dayjs(new Date()).format("YYYY-MM-DD"),
        deviceId: this.search.deviceId,
      }).then((res) => {
        this.newTimeList = res.data || [];
        console.log("this.newTimeList", this.newTimeList);
      });
    },
    getDevicePage() {
      fetch("get", "/dms/mobile/production/first", {
        deviceId: this.search.deviceId,
      }).then((res) => {
        this.newData = res.data;
        this.setEchart(
          "echartsArcbar",
          "本月",
          res.data.deviceUseRatio / 100 || 0
        );
        console.log("getDevicePage", res);
      });
    },
    getList() {
      fetch("get", "/dms/mobile/device/history/state", this.search).then(
        (res) => {
          this.timeList = res.data;
          console.log("this.model", this.model);
        }
      );
    },
    submit() {
      // setNotice(true)
      uni.navigateTo({
        url: "/pages/form/index",
        animationType: "pop-in",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;

  .content {
    min-height: 100%;
  }

  .title {
    font-size: 38rpx;
    margin-bottom: 20rpx;
  }

  .title-1 {
    font-size: 34rpx;
    margin-bottom: 20rpx;
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .main-box {
    background-color: #ffffff;
    padding: 40rpx;
    border-radius: 30rpx 30rpx 0 0;
    margin-bottom: 20rpx;

    .nav-list-box {
      margin-bottom: 40rpx;
    }

    .running-state-box {
      height: 600rpx;
      overflow: auto;
    }

    .running-state {
      margin-bottom: 40rpx;

      .time-box {
        display: flex;
        margin-bottom: 20rpx;
        width: 100%;
        overflow: auto;

        .time-box-item {
          flex: 1;
          position: relative;
          min-width: 68px;
          .txt {
            text-align: center;
          }
        }

        .lien {
          width: 100%;
          height: 30rpx;
          line-height: 30rpx;
          background-color: #e0e0e0;
          margin-bottom: 10rpx;
        }

        .lien-state {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 30rpx;
          line-height: 30rpx;
          background-color: #f17a0a;
        }

        .lien-state-1 {
          background-color: #db3131;
        }
      }

      .running-state-info {
        display: flex;

        .state-info-a {
          flex: 1;
          background-color: #f2f8fe;
          margin-right: 20px;
          padding: 20rpx 0;

          p {
            color: #666;
            font-size: 26rpx;
            text-align: center;

            &:first-child {
              color: #333;
              margin-bottom: 10rpx;
            }
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .production-schedule {
      margin-bottom: 40rpx;

      .production-schedule-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .box-r {
          width: 200rpx;
          height: 200rpx;
        }
      }
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }
}
</style>
